<div class="app-main-default-np-container">
    <div appPageTool [btnsTpl]="btnsTpl">
        <ng-template #btnsTpl>
            <button nz-button nzType="primary" nzGhost (click)="reloadDataDic()"><i nz-icon nzType="reload"
                    nzTheme="outline"></i>重新载入数据字典</button>
        </ng-template>

    </div>
    <div nz-row>
        <div nz-col nzSpan="7" class="app-data-dic-type-container" appScrollbar appContainerCss
            [defaultCls]="'app-layout-content-np-container'" [rendererCls]="'app-desk-layout-content-np-container'">

            <div class="app-data-dic-type-title">
                <nz-form-item>
                    <nz-form-control nzSm="24" nzMd="24" nzLg="24" nzXl="7">
                        <app-line-title title="字典类别"></app-line-title>
                    </nz-form-control>
                    <nz-form-control nzSm="24" nzMd="24" nzLg="24" nzXl="17">
                        <app-business-tool-btn [buttonList]="buttonList" [layoutMark]="layoutMark.leftToolBtn"
                            [btnSize]="'small'" (btnClick)="onBtnClick($event)">
                        </app-business-tool-btn>
                    </nz-form-control>
                </nz-form-item>
            </div>

            <nz-form-item>
                <nz-form-control nzSm="24" nzMd="24" nzLg="24" nzXl="24">
                    <div class="app-data-dic-type-list">
                        <ul nz-menu nzMode="inline" [nzInlineIndent]="2">
                            <li nz-submenu nzIcon="platform/icon:data-dic" [nzTitle]="category.dicItemName"
                                *ngFor="let category of dicCategoryOptionList"
                                (nzOpenChange)="queryDataDicTypeList(category)">
                                <ul *ngIf="category.dataDicTypeList && category.dataDicTypeList.length">
                                    <li nz-menu-item *ngFor="let dataDicType of category.dataDicTypeList"
                                        (click)="queryDataDicItemList(dataDicType)">
                                        <div class="app-flex app-flex-justify-content-between">
                                            <div>
                                                <label nz-checkbox ngDefaultControl
                                                    [(ngModel)]="dataDicType.checked"></label>
                                                <span class="app-data-dic-type-item-name">
                                                    <i nz-icon [nzType]="dataDicType.iconCls" nzTheme="outline"></i>
                                                    {{dataDicType.dicTypeName}}
                                                </span>
                                            </div>
                                            <app-business-row-dropdown-btn [buttonList]="buttonList"
                                                [layoutMark]="layoutMark.leftRowBtn"
                                                (btnClick)="onBtnClick($event,dataDicType)">
                                            </app-business-row-dropdown-btn>
                                        </div>
                                    </li>
                                </ul>
                                <ng-container *ngIf="!(category.dataDicTypeList && category.dataDicTypeList.length)">
                                    <app-custom-empty></app-custom-empty>
                                </ng-container>
                            </li>
                        </ul>
                    </div>
                </nz-form-control>
            </nz-form-item>

        </div>
        <div nz-col nzSpan="17" class="app-data-dic-item-container" appScrollbar appContainerCss
            [defaultCls]="'app-layout-content-np-container'" [rendererCls]="'app-desk-layout-content-np-container'">
            <nz-form-item>
                <nz-form-control nzSm="24" nzMd="24" nzLg="12" nzXl="12" [style]="{'margin-top':'-10px'}">
                    <app-line-title title="查询条件"></app-line-title>
                </nz-form-control>
                <nz-form-control nzSm="24" nzMd="24" nzLg="12" nzXl="12" [style]="{'margin-top':'-10px'}">
                    <app-business-tool-btn [buttonList]="buttonList" [layoutMark]="layoutMark.rightToolBtn"
                        [btnSize]="'small'" (btnClick)="onBtnClick($event)">
                    </app-business-tool-btn>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control nzSm="24" nzMd="24" nzLg="8" nzXl="8">
                    <nz-form-item>
                        <nz-form-label nzSm="24" nzMd="24" nzLg="5" nzXl="4">编号</nz-form-label>
                        <nz-form-control nzSm="24" nzMd="24" nzLg="18" nzXl="19">
                            <input nz-input placeholder="请输入..." [(ngModel)]="queryParams.dicItemCode" />
                        </nz-form-control>
                    </nz-form-item>
                </nz-form-control>
                <nz-form-control nzSm="24" nzMd="24" nzLg="8" nzXl="8">
                    <nz-form-item>
                        <nz-form-label nzSm="24" nzMd="24" nzLg="5" nzXl="4">名称</nz-form-label>
                        <nz-form-control nzSm="24" nzMd="24" nzLg="18" nzXl="19">
                            <input nz-input placeholder="请输入..." [(ngModel)]="queryParams.dicItemName" />
                        </nz-form-control>
                    </nz-form-item>
                </nz-form-control>

                <nz-form-control nzSm="24" nzMd="24" nzLg="8" nzXl="8">
                    <button nz-button nzType="primary" (click)="query(true)"><i nz-icon nzType="search"></i>查询</button>
                </nz-form-control>
            </nz-form-item>


            <div class="app-data-table-container app-margin-top10">
                <nz-form-item>
                    <nz-form-control nzSm="24" nzMd="24" nzLg="24" nzXl="24">
                        <app-line-title title="字典明细"></app-line-title>
                    </nz-form-control>
                </nz-form-item>
                <ng-template #tableShowTotalTpl let-range="range" let-total>
                    共 {{ total }} 条数据，当前显示 {{ range[0] }} 到 {{ range[1] }}
                </ng-template>
                <nz-table #listTable [nzData]="list" [nzBordered]="true" [nzFrontPagination]="false" [nzSize]="'middle'"
                    [(nzPageIndex)]="queryParams.page" [(nzPageSize)]="queryParams.rows" [nzTotal]="queryParams.total"
                    [nzPageSizeOptions]="queryParams.pageSizeOptions" [nzShowSizeChanger]="true"
                    [nzShowTotal]="tableShowTotalTpl" (nzPageIndexChange)="query()" (nzPageSizeChange)="query()">
                    <thead>
                        <tr>
                            <th nzShowCheckbox (nzCheckedChange)="checkAll($event)"></th>
                            <th [nzWidth]="'70px'">序号</th>
                            <th>编号</th>
                            <th>名称</th>
                            <th>值</th>
                            <th>上一级</th>
                            <th [nzWidth]="'70px'">状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of listTable.data;let i = index">
                            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[item.dicItemId]"></td>
                            <td>{{i+1}}</td>
                            <td>{{item.dicItemCode}}</td>
                            <td>{{item.dicItemName}}</td>
                            <td>{{item.dicItemValue}}</td>
                            <td>{{item.dicItemParentName || '无'}}</td>
                            <td>{{(item.status|dataDicPipe:[statusOptionList,'dicItemValue'])?.dicItemName}}</td>
                            <td>
                                <app-business-row-btn [buttonList]="buttonList" [layoutMark]="layoutMark.rightRowBtn"
                                    (btnClick)="onBtnClick($event,item)">
                                </app-business-row-btn>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </div>
</div>